<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-个人考试卷'"> </Breadcrumb>
        <view class="content">
          <view class="box" v-if="examType === '1' || examType === '2'">
            <view class="box_content">
              <view class="title">
                <text class="title1"
                  >{{ gameTitle }}/{{ bookYear }}/{{
                    examType | examTypeFilter
                  }}</text
                >
                <text class="title2"
                  >请输入所听得单词(本次测试共{{
                    wordList.length
                  }}题,总分100分)</text
                >
              </view>
              <view class="word_box">
                <view class="word_box_content">
                  <template v-if="examType === '1'">
                    <WordTestListen
                      ref="wordTestListen"
                      :wordList="wordList"
                      @clearTimer="clearTimer"
                      @commitTest="commitTest"
                    >
                      <template slot="progress">
                        <view class="progress2">
                          <u-circle-progress
                            active-color="#0091ea"
                            inactive-color="#78ccff"
                            :percent="percent"
                            bg-color="#f2f2f2"
                          >
                            <view class="u-progress-content">
                              <view class="u-progress-text1">倒计时</view>
                              <view class="u-progress-text2"
                                >{{ hourNumber }}时{{ minuteNumber }}分{{
                                  secondNumber
                                }}秒</view
                              >
                            </view>
                          </u-circle-progress>
                        </view>
                      </template>
                    </WordTestListen>
                  </template>
                  <template v-if="examType === '2'">
                    <WordTestLook
                      ref="wordTestLook"
                      :wordList="wordList"
                      @clearTimer="clearTimer"
                      @commitTest="commitTest"
                    >
                      <template slot="progress">
                        <view class="progress1">
                          <u-circle-progress
                            active-color="#0091ea"
                            inactive-color="#78ccff"
                            :percent="percent"
                            bg-color="#f2f2f2"
                          >
                            <view class="u-progress-content">
                              <view class="u-progress-text1">倒计时</view>
                              <view class="u-progress-text2"
                                >{{ hourNumber }}时{{ minuteNumber }}分{{
                                  secondNumber
                                }}秒</view
                              >
                            </view>
                          </u-circle-progress>
                        </view>
                      </template>
                    </WordTestLook>
                  </template>
                </view>
              </view>
            </view>
            <view class="tips" v-if="examType === '1'">
              <view class="tips_content">
                <text>打开软键盘</text>
                <u-switch
                  v-model="softKeyboard"
                  @change="softKeyboardSwitch"
                  size="22"
                ></u-switch>
              </view>
            </view>
          </view>
          <view class="box" v-if="examType === '3'">
            <view class="box_content">
              <view class="title">
                <text class="title1"
                  >{{ gameTitle }}/{{ bookYear }}/{{
                    examType | examTypeFilter
                  }}</text
                >
                <text class="title2">(综合测评)</text>
              </view>
              <view class="evaluation">
                <view class="evaluation_content">
                  <PaperEvaluation
                    ref="paperEvaluation"
                    v-if="paper"
                    :paper="paper"
                    :totalScore="totalScore"
                    @report="handleReport"
                    @submit="submit"
                    @clearTimer="clearTimer"
                  ></PaperEvaluation>
                </view>
              </view>
              </view>
              <view class="time">
                <text
                  >倒计时:{{ hourNumber }}时{{ minuteNumber }}分{{
                    secondNumber
                  }}秒</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPaper, commitQuestionPaper } from "@/api/task";
import { getSystemDateTime } from "@/api/common";
export default {
  components: {},
  computed: {
    percent() {
      if (this.countDownNumber > 0) {
        if (this.hour >= 0) {
          return parseInt(
            ((this.hour * 3600 + this.minute * 60 + this.second) /
              this.countDownNumber) *
              100
          );
        }
      }
    },
  },
  filters: {
    examTypeFilter(status) {
      const statusMap = {
        1: "单词听写",
        2: "单词听选",
        3: "模考真题",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      id: "",
      userExamId: "",
      examType: "",
      gameType: "",
      gameTitle: "",
      bookYear: "",
      startTime: "",
      endTime: "",
      commitTime: "",
      totalScore: 0,
      paper: null,
      timerId: null,
      hour: 0,
      hourNumber: "00",
      minute: 0,
      minuteNumber: "00",
      second: 0,
      secondNumber: "00",
      countDownNumber: 0,
      time: "",

      wordList: [],
      softKeyboard: true,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      let params = {
        id: this.id,
      };
      getPaper(params).then((res) => {
        this.examType = res.data.examType;
        this.gameType = res.data.gameType;
        this.gameTitle = res.data.gameTitle;
        this.bookYear = res.data.bookYear;
        this.endTime = res.data.endTime;
        if (res.data.words) {
          this.wordList = res.data.words;
        }
        if (res.data.testPaper) {
          this.totalScore = res.data.testPaper.score;
          this.paper = res.data.testPaper;
        }
        this.getTime();
      });
    },
    getTime() {
      getSystemDateTime().then((res) => {
        this.startTime = res.data;
        this.handleTime();
      });
    },
    handleTime() {
      let lefttime =
        new Date(this.endTime).getTime() - new Date(this.startTime).getTime(); //距离结束时间的毫秒数
      this.countDownNumber = lefttime / 1000;
      this.hour = Math.floor((lefttime / (1000 * 60 * 60)) % 24); //计算小时数
      this.minute = Math.floor((lefttime / (1000 * 60)) % 60); //计算分钟数
      this.second = Math.floor((lefttime / 1000) % 60); //计算秒数
      this.countDown();
    },
    countDown() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          this.minute = 59;
          this.hour--;
        }
        if (this.hour < 0) {
          if (this.examType === "3") {
            this.$refs.paperEvaluation.submit(true);
          } else if (this.examType === "1") {
            this.$refs.wordTestListen.submit(true);
          } else if (this.examType === "2") {
            this.$refs.wordTestLook.submit(true);
          }
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }

        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        if (this.hour < 10) {
          this.hourNumber = this.hour.toString().padStart(2, "0");
        } else {
          this.hourNumber = this.hour.toString();
        }
      }, 1000);
    },
    submit(score, examUserAnswer, subjectiveUserAnswer) {
      getSystemDateTime().then((res) => {
        this.commitTime = res.data;
        let params = {
          taskId: this.id,
          startTime: this.startTime,
          commitTime: this.commitTime,
          gotScore: score,
          totalScore: this.totalScore,
          examUserAnswer: examUserAnswer,
          subjectiveUserAnswer: subjectiveUserAnswer,
        };
        commitQuestionPaper(params).then((res) => {
          this.userExamId = res.data.userExamId;
          this.$refs.paperEvaluation.showResult(
            this.gameType,
            res.data.hasGold,
            res.data.goldNum
          );
        });
      });
    },
    handleReport() {
      uni.redirectTo({
        url: `/pages/task/paper/paperReport?id=${this.userExamId}`,
      });
    },
    softKeyboardSwitch(value) {
      this.$refs.wordTestListen.softKeyboard(value);
    },
    clearTimer() {
      clearInterval(this.timerId);
    },
    commitTest(correctList, errorList, allList, score) {
      getSystemDateTime().then((res) => {
        this.commitTime = res.data;
        let params = {
          taskId: this.id,
          startTime: this.startTime,
          commitTime: this.commitTime,
          totalScore: 100,
          gotScore: score,
          errorResult: errorList.toString(),
        };
        commitQuestionPaper(params).then((res) => {
          let goldNum = res.data.goldNum;
          if (this.examType === "1") {
            this.$refs.wordTestListen.handleResult(goldNum, this.gameType);
          } else if (this.examType === "2") {
            this.$refs.wordTestLook.handleResult(goldNum, this.gameType);
          }
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./paperDetail.scss";
</style>
